//该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router';

//引入组件
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";
import News from '../pages/News.vue'
import Messages from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            name: 'guanyu',//给路由命名，可以简化跳转时候的路径书写，不用path配置项用name配置项,必须配合to的对象写法
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [//嵌套路由
                {
                    path: 'news',//子路由不用加'/'或者写全/home/news
                    component: News
                },
                {
                    path: 'messages',
                    component: Messages,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:content',
                            component: Detail,

                            //props的第一种写法，值为对象，该对象中的所有key - value都会以props的形式传给Detail组件。
                            // props: { a: 100, b: 'hello' }

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            props: true,

                            //第三种写法: props值为函数(可用于query参数与params参数)，该函数返回的对象中每一组key-value都会通过props传给Detail组件,vue-router会自动将该组件的$route传入，query参数时上面的path里面不用占位符id与content
                            // props: function ($route) {
                            //     return { id: $route.query.id, content: $route.query.content }
                            // }
                        }
                    ]
                },
            ]
        },
    ]
});
